/*
 * @Author: error: git config user.name & please set dead value or install git
 * @Date: 2024-11-19 11:16:39
 * @LastEditors: GL glstrive@163.com
 * @LastEditTime: 2024-11-19 14:34:40
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name}, All Rights Reserved. 
 */
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { AppUtils } from '@/App';
import { useAuthStore } from '@/stores/auth';
import { Input } from 'antd';

function LoginPanel() {
  const [account, setAccount] = useState('');
  const [password, setPassword] = useState('');
  const [errMsg, setErrMsg] = useState('');
  const [executing, setExecuting] = useState(false);
  const loginAction = useAuthStore((state) => state.login);
  const navigate = useNavigate();
  const { t } = useTranslation();
  const appUtils = React.useContext(AppUtils);

  async function login() {
    if (executing) {
      return;
    }

    setErrMsg('');
    setExecuting(true);

    try {
      await loginAction(account, password);
      navigate('/');
    } catch (e) {
      setErrMsg((e as Error).message);
    } finally {
      setExecuting(false);
    }
  }

  return (
    <div
      className="relative z-10 rounded-lg"
      style={
        appUtils.isMobile
          ? {}
          : {
              backgroundImage: 'linear-gradient(to top, #e81ca5, #f44b39)',
              padding: 1,
            }
      }
    >
      <div className="rounded-lg bg-black md:pb-7 px-7 md:pt-5">
        <div className="flex w-full flex-col">
          <div className="mb-5 text-center text-16 leading-140 text-ff">
            {t('loginTitle')}
          </div>
          {appUtils.isMobile ? (
            ''
          ) : (
            <div className="text-center text-14 leading-140 text-7b text-ff">
              {t('loginDesc')}
            </div>
          )}
          <div className="mb-1 text-14 text-ff">{t('account')}</div>
          <input
            className="mb-3 h-10 md:w-[393px] text-ff rounded-sm bg-grey px-5 py-2 text-14 leading-140 outline-none"
            type="text"
            placeholder={t('account')}
            value={account}
            onChange={(e) => setAccount(e.target.value)}
          />
          <div className="mb-1 text-14 text-ff">{t('password')}</div>
          <Input.Password
            className="mb-7 custom-input text-ff border-0 h-10 md:w-[393px] rounded-sm bg-grey px-5 py-0 text-14 leading-140 outline-none"
            type="password"
            placeholder={t('password')}
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            onKeyUp={(e) => e.key === 'Enter' && login()}
            visibilityToggle
          />
          <button
            className="rounded-lg bg-red py-2 text-16 leading-140 text-white shadow-btn active:translate-y-px active:shadow-none"
            onClick={login}
          >
            {executing ? t('logining') : t('login')}
          </button>
          <div className="text-red-500 mt-2 h-6 px-2">{errMsg}</div>
        </div>
      </div>
    </div>
  );
}

export default LoginPanel;
